import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
  Image,
  Animated,
  Easing,
} from 'react-native';

export default class SimpleAnimate3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      translateValue: new Animated.Value(1),
    };
    this._onPress = this._onPress.bind(this);
  }

  /**
   * spring：基础的弹跳物理模型动画
   * timing：带有时间的渐变动画
   * decay：以一个初始速度开始并且逐渐减慢停止的动画
   *
   type SpringAnimationConfig = AnimationConfig & {
    toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
    overshootClamping?: bool,
    restDisplacementThreshold?: number,
    restSpeedThreshold?: number,
    velocity?: number | {x: number, y: number},   //初始速度，默认0
    bounciness?: number,      //反弹系数,默认8
    speed?: number,           //速度，默认12
    tension?: number,         //张力系数，默认7
    friction?: number,        //摩擦系数，默认40
  };

   type TimingAnimationConfig = AnimationConfig & {
    toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
    easing?: (value: number) => number,  //缓动函数，默认 Easing.inOut(Easing.ease).
    duration?: number,  //动画时长,单位毫秒,默认500
    delay?: number,  //动画执行延迟时间,单位:毫秒,默认为0
   };

   type DecayAnimationConfig = AnimationConfig & {
     velocity: number | {x: number, y: number},  //初始速度,必须要填写
     deceleration?: number,  //速度减小的比例，加速度。默认为0.997
   };


   */
  _onPress() {
    Animated.spring(this.state.translateValue, {
      toValue: 0,
      velocity: 7,
      tension: -20,
      friction: 3,
    }).start();
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('nextState',nextState);
    return false;
  }

  render() {
    console.log('render')
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.content, {
          transform: [
            {scale: this.state.translateValue.interpolate({
                inputRange: [0, 1],
                outputRange: [1, 3],
              })},
            {translateX: this.state.translateValue.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 300],
              })},
            {rotate: this.state.translateValue.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '720deg'],
              })},
          ]
        }]}>
          <Text style={[{textAlign: 'center'}]}>Hello World!</Text>
        </Animated.View>
        <TouchableOpacity style={styles.content} onPress={this._onPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Press me!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 25,
    flex: 1,
  },
  content: {
    backgroundColor: 'rgba(200, 230, 255, 0.8)',
    marginBottom: 10,
    justifyContent: "center",
    alignSelf: "center",
  },
  button: Platform.select({
    ios: {},
    android: {
      elevation: 4,
      // Material design blue from https://material.google.com/style/color.html#color-color-palette
      backgroundColor: '#2196F3',
      borderRadius: 2,
      width: 100,
      height: 30,
    },
    justifyContent: "center",
    alignSelf: "center",
  }),
  buttonText: {
    alignSelf: "center",
  }
});
